<template>
	<view class="order_card_container">
		<view class="order_card">
			<!-- 标题 -->
			<view class="order_card_top">
				<!-- 时间 -->
				<view class="order_card_top_time">{{item.giveAwayTime || item.createTime}}</view>
				<!-- 转让状态判读 -->
				<view class="order_card_top_time" :class="[item.status == 0 ? 'success' : 'fail']"
					v-if="componentOrderType == 'transfer'">{{ item.status == 0 ? '赠送成功' : '赠送失败'}}</view>
				<!-- 购买状态判断	 -->
				<view class="order_card_top_time" :class="[item.status == 0 ? 'success' : 'fail']"
					v-if="componentOrderType == 'purchase'">
					{{ item.status == 0 ? '购买成功' : item.status == 1 ? '购买失败' : '未支付'}}
				</view>
				<!-- 退款状态判断 -->
				<view class="order_card_top_time" :class="[item.status == 1 ? 'success' : 'fail']"
					v-if="componentOrderType == 'refund'">
					{{ item.status == 0 ? '未审核' : item.status == 1 ? '退款成功' : '退款失败'}}
				</view>
				<!-- 充值状态判断 -->
				<view class="order_card_top_time" :class="[item.status == 0 ? 'success' : 'fail']"
					v-if="componentOrderType == 'recharge'">
					{{ item.status == 0 ? '充值成功'  : '充值失败'}}
				</view>
			</view>
			<u-line></u-line>
			<view class="order_card_content">
				<!-- 封面 -->
				<!-- 不是充值的时候展示 -->
				<view class="img" v-if="componentOrderType != 'recharge'">
					<image :src="orderImg" mode=""></image>
				</view>
				<view class="order_card_content_description">
					<!-- 商品名字 -->
					<!-- 不是充值的时候展示 -->
					<view class="order_card_content_description_title style_marginBottom"
						v-if="componentOrderType != 'recharge'">{{ item.theme.themeName }}
					</view>
					<!-- 不是充值或者转让的时候展示 -->
					<view class="" v-if="componentOrderType != 'transfer' && componentOrderType != 'recharge'">
						<!-- <view class="order_card_content_description_type style_marginBottom">{{item.typeNo == 0}}</view> -->
						<view class="order_card_content_description_money style_marginBottom">¥ {{ item.txAmt }}</view>
					</view>
					<!-- 充值的时候展示 -->
					<view class="" v-if="componentOrderType == 'recharge'">
						充值金额 {{item.amount}} 币种 {{item.ccy}}
					</view>
				</view>
			</view>
			<!-- 购买的时候展示 -->
			<view class="order_card_money" v-if="componentOrderType == 'purchase'">
				实付款
				<text style="color: #000000;">¥ {{ item.txAmt }}</text>
			</view>
			<!-- 退款的时候展示 -->
			<view class="order_card_money" v-if="componentOrderType == 'refund'">
				退款金额
				<text style="color: #000000;">¥ {{ item.txAmt }}</text>
			</view>
			<u-line></u-line>
			<!-- 购买的时候展示 -->
			<view class="order_card_btn" v-if="componentOrderType == 'purchase'">
				<u-button type="primary" :plain="true" text="取消订单" shape="circle" class="option_1" color="#333">
				</u-button>
				<u-button type="primary" :plain="true" text="立即支付" shape="circle" class="option_2"
					color="var(--echo-main-color)"></u-button>
			</view>
			<!-- 退款的时候展示 -->
			<view class="order_card_btn refund_btn" v-if="componentOrderType == 'refund'">
				<u-button type="primary" :plain="true" text="退款" shape="circle" class="option_2"
					color="var(--echo-main-color)"></u-button>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 封面
				orderImgData: ''
			};
		},
		props: {
			item: {
				type: Object
			},
			componentOrderType: {
				type: String
			}
		},
		created() {
			console.log(this.item)
			console.log(this.componentOrderType)
		},
		computed: {
			// 处理用于展示图片 0 主题 1碎片
			orderImg() {
				if (this.item.type == 1) {
					this.orderImgData = this.item?.fragments?.metadataUrl
				} else {
					this.orderImgData = this.item?.theme?.metadataUrl
				}
				return this.orderImgData
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.order_card_container {
		box-shadow: 4px 4px 26px 6px rgba(0, 0, 0, 0.08);
		padding: 30rpx;
		margin-top: 30rpx;
		background-color: #FFF;

		.style_marginBottom {
			margin-bottom: 20rpx;
		}

		// 订单状态判断
		.success {
			color: $echo-main-color;
		}

		.fail {
			color: red;
		}


		.order_card {

			&_top {
				display: flex;
				justify-content: space-between;

				&_time {
					margin-bottom: 20rpx;
					font-size: $echo-font-size-conent
				}

			}

			&_content {
				display: flex;
				justify-content: space-between;
				margin: 30rpx 0;

				.img {
					width: 200rpx;
					height: 200rpx;
					margin-right: 30rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				// 详情
				&_description {
					flex: 1;
					font-size: $echo-font-size-conent;

					&_type {
						color: #999;
					}
				}
			}

			&_money {
				text-align: right;
				font-size: $echo-font-size-conent;
				color: #999;
				margin-bottom: 30rpx;
			}

			// 按钮
			&_btn {
				display: flex;
				margin-top: 30rpx;
				justify-content: center;
				width: 50%;
				position: relative;
				left: 50%;

				.option_2 {
					margin-left: 20rpx;
				}
			}

			// 退款按钮
			.refund_btn {
				width: 25%;
				position: relative;
				left: 75%;
			}
		}
	}
</style>
